import * as THREE from "./three.module.js";
import {GLTFLoader} from "./GLTFLoader.js";

let renderer, camera, scene;
var audio = new Audio('bg.mp3');

let cameraPositions=[
    {   
        pos:new THREE.Vector3(11.773039179631034, 4.3429664402642825, 14.119268710897057),
        rot:new THREE.Vector3(-0.9693615983211288, 0.016143030706741914, 0.023518350456316575)
    },{
        pos:new THREE.Vector3(15.853952082211114, 4.137355399203829, 15.340752625317574),
        rot:new THREE.Vector3(-0.6366131995823259, 0.74404122011524, 0.46420616769071105)
    },{
        pos:new THREE.Vector3(7.658290856102248, 6.121954110651836, 6.2512023615458805),
        rot:new THREE.Vector3(-1.337724254116557, 0.3856119281296742, 1.0077978867111503)
    },{
        pos:new THREE.Vector3(11.753656176511146, 6.763222958896246, 3.5137912389469776),
        rot:new THREE.Vector3(-0.9693615983211253, 0.01614303070678795, 0.02351835045638345)
    },{
        pos:new THREE.Vector3(-0.4765750621359341, 6.812311669332006, 3.791218039227606),
        rot:new THREE.Vector3(-0.9693615953971499, 0.01614305157000482, 0.023518380690256364)
    }
];

let timeMax = 1000;
let time = timeMax; // 计时缓动用
let oldPos;
let newPos;
let oldRot;
let newRot;
let infoBlock1, infoBlock2, infoBlock3, infoBlock4, infoBlock5;
let infoBlocks = [];
window.cameraPositions = cameraPositions;
window.cameraMove = cameraMove;

document.getElementById("logo").style.visibility = 'hidden';
document.getElementById("UIBox").style.visibility = 'hidden';
document.getElementById("panel").style.visibility = 'hidden';
document.getElementById("preloader").style.visibility = 'visible';

function init(){
    document.getElementById("panel").style.opacity = 0;
    infoBlock1 = document.getElementById("info1");
    infoBlock2 = document.getElementById("info2");
    infoBlock3 = document.getElementById("info3");
    infoBlock4 = document.getElementById("info4");
    infoBlock5 = document.getElementById("info5");
    infoBlock1.style.display = "none";
    infoBlock2.style.display = "none";
    infoBlock3.style.display = "none";
    infoBlock4.style.display = "none";
    infoBlock5.style.display = "none";
    infoBlocks.push(infoBlock1);
    infoBlocks.push(infoBlock2);
    infoBlocks.push(infoBlock3);
    infoBlocks.push(infoBlock4);
    infoBlocks.push(infoBlock5);
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/ window.innerHeight, 0.1, 100);
    renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true });
    camera.position.set(5.037419298323207, 22.741359309625338, 8.31343674227458);
    camera.rotation.x = -1.4766525295698574;
    camera.rotation.y = -0.0006985213285492247;
    camera.rotation.z = -0.007397658580206406;

    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x3fbdc0);
    document.body.appendChild(renderer.domElement);

    window.scene = scene;
    window.camera = camera;
    window.renderer = renderer;
}
function animate(){
    requestAnimationFrame(animate);
    next();
    renderer.render(scene, camera);
}
function next(){
    time ++;
    if(time>timeMax)
        return;

    let newP = newPos.clone();
    newP.sub(oldPos);
    newP.multiplyScalar(time/timeMax);
    newP.add(oldPos);

    let newR = newRot.clone();
    newR.sub(oldRot);
    newR.multiplyScalar(time/timeMax);
    newR.add(oldRot);

    cameraMove({pos:newP ,rot:newR} );
}
function loadScene(){
    let cube = new THREE.Mesh(
        new THREE.BoxBufferGeometry(), 
        new THREE.MeshBasicMaterial({color:0x00ff00}));
    cube.position.set( 4.970055936916466, 1.30003243665689, 27.037129121023394);
    window.cube=cube;
    scene.add(cube);
    let lightA = new THREE.AmbientLight(0xaaaaaa);
    scene.add(lightA);

    let lightB = new THREE.DirectionalLight(0x666666);
    var targetObject = new THREE.Object3D();
    targetObject.position.set(1,-1,1);
    scene.add(lightB);
    scene.add(targetObject);
    lightB.target = targetObject;

    let lightC = new THREE.DirectionalLight(0x333333);
    var targetObject2 = new THREE.Object3D();
    targetObject2.position.set(-1,-1,-1);
    scene.add(lightC);
    scene.add(targetObject2);
    lightC.target = targetObject2;

    let loader = new GLTFLoader();
    loader.load('./test2.gltf',function(gltf){
        let meshs = gltf.scene.children[0];
        scene.add(meshs);
    })
}

function cameraMove(posData){
    camera.position.copy(posData.pos);
    camera.rotation.x = posData.rot.x;
    camera.rotation.y = posData.rot.y;
    camera.rotation.z = posData.rot.z;
}
function UI(){
    for(let i=0; i < cameraPositions.length; i++){
        let domEle = document.getElementById("b"+i);
        domEle.onclick = function s(){
            document.getElementById("panel").style.opacity = 0.8;
            infoBlock1.style.display = "none";
            infoBlock2.style.display = "none";
            infoBlock3.style.display = "none";
            infoBlock4.style.display = "none";
            infoBlock5.style.display = "none";
            infoBlocks[i].style.display = "block";
            time = 0;
            oldPos = camera.position;
            oldRot = camera.rotation;
            newPos = cameraPositions[i].pos;
            newRot = cameraPositions[i].rot;
        };
    }
}

function render() {
    renderer.render( scene, camera );
}

document.getElementById("begin").onclick = function s(){
    document.getElementById("logo").style.visibility = 'visible';
    document.getElementById("UIBox").style.visibility = 'visible';
    document.getElementById("panel").style.visibility = 'visible';
    document.getElementById("preloader").style.visibility = 'hidden';

    audio.play();
    init();
    loadScene();
    animate();
}


window.onload = UI;